const transitions = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"     
};
const transitionSupport = (() => {
    const el = document.createElement('surface');
    for(let t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
})();
export default class Transition {
    constructor(onCurrentTransitionEnd, onNextTransitionEnd) {
        this.onCurrentTransitionEnd = onCurrentTransitionEnd;
        this.onNextTransitionEnd = onNextTransitionEnd;
    }

    start(current, next, data) {
        const that = this;
        const currentEnd = function() {
            this.removeEventListener(transitionSupport, currentEnd);
            if (that.onCurrentTransitionEnd) {
                that.onCurrentTransitionEnd(current, next, data);
            }
        };
        const nextEnd = function() {
            this.removeEventListener(transitionSupport, nextEnd);
            if (that.onNextTransitionEnd) {
                that.onNextTransitionEnd(current, next, data)
            }
        }
        current.addEventListener(transitionSupport, currentEnd);
        next.addEventListener(transitionSupport, nextEnd);
    }
}